@mixin createAnimationTransition($property, $duration: .1s, $func: ease-in-out){
	transition :$property $duration $func;
}
@mixin createCheckboxIcon{
	.vxe-checkbox--icon{
		font-size :1.34em;
	}
	.vxe-checkbox--icon{
		color          :var(--vxe-ui-input-border-color);
		vertical-align :middle;
		font-weight    :700;
		user-select    :none;
	}
	&.is--checked,
	&.is--indeterminate{
		color :var(--vxe-ui-font-primary-color);
		.vxe-checkbox--icon{
			color :var(--vxe-ui-font-primary-color);
		}
	}
	&:not(.is--disabled){
		cursor :pointer;
		&:hover{
			.vxe-checkbox--icon{
				color :var(--vxe-ui-font-primary-color);
			}
		}
	}
	&.is--hidden{
		cursor :default;
	}
	&.is--disabled{
		color  :var(--vxe-ui-font-disabled-color);
		cursor :not-allowed;
		.vxe-checkbox--icon{
			color :var(--vxe-ui-input-disabled-color);
		}
	}
	.vxe-checkbox--label{
		padding-left   :0.5em;
		vertical-align :middle;
	}
}
@mixin createRadioIcon{
	cursor :pointer;
	.vxe-radio--icon{
		font-size :1.4em;
	}
	.vxe-radio--icon{
		color          :var(--vxe-ui-input-border-color);
		vertical-align :middle;
		font-weight    :700;
		user-select    :none;
	}
	&.is--checked{
		color :var(--vxe-ui-font-primary-color);
		.vxe-radio--icon{
			color :var(--vxe-ui-font-primary-color);
		}
	}
	&:not(.is--disabled){
		cursor :pointer;
		&:hover{
			.vxe-radio--icon{
				color :var(--vxe-ui-font-primary-color);
			}
		}
	}
	&.is--disabled{
		color  :var(--vxe-ui-font-disabled-color);
		cursor :not-allowed;
		.vxe-radio--icon{
			color :var(--vxe-ui-input-disabled-color);
		}
	}
	.vxe-radio--label{
		padding-left   :0.5em;
		vertical-align :middle;
	}
}
